<template>
	<div class="zs-table-page-container">
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
			<span>
				<el-select filterable @change="queryList()" v-model="queryParams.projectCode" class="zs-select-md zs-space-right-sm" placeholder="项目" clearable>
					<el-option v-for="item in brandDownList" :key="item.projectCode" :label="item.projectName" :value="item.projectCode" />
				</el-select>
				<el-select @change="queryList()" v-model="queryParams.format" class="zs-select-md zs-space-right-sm" placeholder="业态" clearable>
					<el-option v-for="item in brandFirstBizTypes" :key="item.format" :label="item.format" :value="item.format" />
				</el-select>
				<el-select @change="queryList()" v-model="queryParams.bizMode" class="zs-select-md zs-space-right-sm" placeholder="资产类型" clearable>
					<el-option v-for="item in bizModeList" :key="item.bizMode" :label="item.bizMode" :value="item.bizMode" />
				</el-select>
				<el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
					<template #reference>
						<el-button class="zs-btn-square-solid" :class="{ 'zs-btn-square-solid-active': queryParams.startMonth || queryParams.endMonth || queryParams.contractsStatus }">
							<el-icon>
								<MoreFilled />
							</el-icon>
						</el-button>
					</template>
					<template #default>
						<el-date-picker class="zs-space-right-sm" :teleported="false" v-model="queryParams.startMonth" type="month" placeholder="权责开始月" value-format="YYYY-MM" @change="changeDate('start')" />
						<el-date-picker class="zs-space-right-sm" :teleported="false" v-model="queryParams.endMonth" type="month" placeholder="权责结束月" value-format="YYYY-MM" @change="changeDate('end')" />
						<el-select v-model="queryParams.contractsStatus" class="zs-select-md zs-space-right-sm" placeholder="合同状态" clearable @change="queryList" :teleported="false">
							<el-option v-for="item in contractsStatusList" :key="item.contractsStatus" :label="item.contractsStatus" :value="item.contractsStatus" />
						</el-select>
					</template>
				</el-popover>
				<el-button @click="queryList()" class="zs-btn-plain">查询</el-button>
			</span>
		</div>
		<div class="zs-card zs-table-page-content" :class="{'zs-table-first-row-special': queryParams.pageNum == 1}">
			<hsPageTable :loading="tableData.loading" :total="tableData.total" :isHaveIndex="false" :tableData="tableData.data" :cloumns="tableData.cloumns" @pageChange="pageChange"> </hsPageTable>
		</div>
	</div>
</template>

<script setup lang="jsx">
	import { toThousands } from '@/utils/number-util';
	import { ElMessage } from 'element-plus';
	// import detailApi from '@/api/Manage/Business/detailPages';
	import { getFormatDropdownApi, getBizModeDropdownApi, getDropDownListApi, getContractsStatusDropdownApi } from '@/api/SpecialReport/receivable';
	import { getReceiptsReceivedProjectListApi } from '@/api/SpecialReport/netReceipts';
	import { reactive, ref } from 'vue';
	import { useRouter } from 'vue-router';
	import { useStore } from 'vuex';
	let store = useStore();
	let router = useRouter();
	const curPageSize = ref(store.state.uiPageSizeDefault);

	// 查询条件
	let queryParams = reactive({
		projectCode: '',
		format: '',
		startMonth: '',
		endMonth: '',
		contractsStatus: '',
		pageNum: 1,
		pageSize: curPageSize,
	});
	// 表格数据
	let tableData = reactive({
		loading: false,
		data: [],
		total: 0,
		cloumns: [
			{
				prop: 'index',
				label: '序号',
				width: '80',
				type: 'customMethods',
				methods: (a, empty, { $index }) => queryParams.pageNum == 1 ? ($index == 0 ? '合计' : $index + queryParams.pageSize * (queryParams.pageNum - 1)) : $index + 1 + queryParams.pageSize * (queryParams.pageNum - 1),
			},
			{
				prop: 'projectName',
				label: '项目名称',
				align: 'left',
				type: 'html',
				minWidth: '300',
				render: ({ row }) => {
					return (
						<span class="zs-link" onClick={() => jumpDetailPage(row)}>
							{row.projectName}
						</span>
					);
				},
			},
			{ prop: 'format', label: '业态', align: 'center', minWidth: '100', type: 'customMethods', methods: row => (row.format ? row.format : '') },
			{ prop: 'projectStage', label: '阶段', align: 'center', minWidth: '100', type: 'customMethods', methods: row => (row.projectStage ? row.projectStage : '') },
			{ prop: 'groupName', label: '集团', align: 'center', minWidth: '100', type: 'customMethods', methods: row => (row.groupName ? row.groupName : '') },
			{ prop: 'city', label: '城市', align: 'center', minWidth: '100', type: 'customMethods', methods: row => (row.city ? row.city : '') },
			{
				prop: 'invIncomeamtl',
				label: '实收金额',
				minWidth: '200',
				align: 'right',
				type: 'customMethods',
				methods: (row, empty) => (row.invIncomeamtl ? toThousands(row.invIncomeamtl) : empty),
			},
		],
	});

	function jumpDetailPage(row) {
		let query = {
			rTitle: '实收统计表明细',
			projectCode: row.projectCode,
			brandName: row.wtBrandname,
			rTime: new Date().getTime(),
		};
		router.push({
			path: '/SpecialReport/netReceipts/detailList',
			query,
		});
	}

	// 分页变化
	function pageChange(page) {
		queryParams.pageNum = page.current;
		queryParams.pageSize = page.pageSize;
		queryList();
	}
	function queryList() {
		if ((queryParams.startMonth && !queryParams.endMonth) || (!queryParams.startMonth && queryParams.endMonth)) {
			ElMessage.warning('请选择权责开始结束月份');
			return;
		}
		tableData.loading = true;
		let params = Object.assign({}, queryParams);
		getReceiptsReceivedProjectListApi(params).then(res => {
			let resData = res.data;
			if (resData.errorCode == 200 && resData.data.projectList != null && resData.data.projectList.length > 0) {
				if (queryParams.pageNum == 1) {
					let sumObj = {
						invIncomeamtl: resData.data.invIncomeamtlTotal,
					};
					resData.data.projectList.unshift(sumObj);
				}
				tableData.data = resData.data.projectList;
				tableData.total = resData.totalCount;
			} else {
				tableData.data = [];
				tableData.total = 0;
			}
			tableData.loading = false;
		});
	}
	queryList();

	let brandDownList = ref([]);
	function getBrandDownList() {
		getDropDownListApi().then(res => {
			let resData = res.data;
			if (resData.code == 200) {
				brandDownList.value = resData.data.projectDropdownRespList;
			}
		});
	}
	getBrandDownList();

	function changeDate(type) {
		if (queryParams.startMonth && queryParams.endMonth) {
			if (type == 'start' && queryParams.startMonth > queryParams.endMonth) {
				ElMessage.warning('开始月份不能大于结束月份');
				queryParams.startMonth = '';
			} else if (type == 'end' && queryParams.endMonth < queryParams.startMonth) {
				ElMessage.warning('结束月份不能小于开始月份');
				queryParams.endMonth = '';
			}
		}
	}

	let brandFirstBizTypes = ref([]);
	let bizModeList = ref([]);
	let contractsStatusList = ref([]);
	function getBrandfirstBizType() {
		// 业态
		getFormatDropdownApi().then(res => {
			let resData = res.data;
			if (resData.errorCode == 200) {
				brandFirstBizTypes.value = resData.data;
			}
		});
		// 资产类型
		getBizModeDropdownApi().then(res => {
			let resData = res.data;
			if (resData.errorCode == 200) {
				bizModeList.value = resData.data;
			}
		});
		// 合同状态
		getContractsStatusDropdownApi().then(res => {
			let resData = res.data;
			if (resData.errorCode == 200) {
				contractsStatusList.value = resData.data;
			}
		});
	}
	getBrandfirstBizType();
</script>

<style lang="scss" scoped>
	:deep(.el-table__row .zs-link) {
		cursor: pointer !important;
	}
</style>
